<template>
  <div style="overflow: hidden">
    <div class="channel-add-video">
      <div class="add-covers-meta">
        <span class="iconfont icon-plus-full create-covers-meta-span"></span>
        <span class="create-covers-meta-span">添加视频</span>
      </div>
    </div>
    <!--菜单排序组件-->
    <draggable :list="list" item-key="id" :animation="100" :sort='true' handle=".mover" @end="onEnd">
      <template #item="{ element }">
        <div :class="['small-item-other',(element.id)%6==0?'small-item-six':'small-item-original']">
          <div class="soon-dianzan-other" @mouseenter="watchlater=element.id" @mouseleave="watchlater=-1">
            <img class="common-cursor soon-dianzan-img" :src="require('/src/assets/img/picture.png')" alt="">
            <span class="length" v-show="watchlater!=element.id">00:08</span>
            <span @click="watchLater(element)" class="i-watchlater" v-show="watchlater==element.id"></span>
            <!--左上角视频序号-->
            <span class="num-icon">{{ element.id }}</span>
            <!--移出可拖动按钮-->
            <div class="drag-item-handlebar mover">
              <span class="iconfont icon-liebiao1-copy" style="color: #eee;font-size: 18px"></span>
            </div>
          </div>
          <div class="video-title">
            <span class="two-text-overflow common-cursor common-hover">“江湖顶流”</span>
          </div>
          <div class="meta">
            <div style="width: 92px;display: inline-block">
              <span class="iconfont icon-bofang"></span>
              <span style="margin-left: 5px" class="play">12.5万</span>
            </div>
            <span class="iconfont icon-xinxi"></span>
            <span style="margin-left: 5px">2-7</span>
            <el-popover
                placement="bottom"
                popper-class="el-popover-self-two"
                trigger="click">
              <template #reference>
                <span class="iconfont icon-caidan menu-delete-span" title="跟多操作"></span>
              </template>
              <ul class="ul-dropdown-item">
                <li class="be-dropdown-item-delimiter">删除视频</li>
                <li class="be-dropdown-item-delimiter">移至底部</li>
              </ul>
            </el-popover>
          </div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  /**合集里的视频item**/
  name: "compilationEditItem",
  components: {draggable},
  props: {
    list: {
      type: Array,
      default: ()=>[]
    },
  },
  created() {
    console.log('222')
  },
  data() {
    return {
      watchlater: -1,
    }
  },
  methods: {
    // 拓展结束执行
    onEnd() {

    },
    openDialog() {

    },
    // 稍后再看
    watchLater(item){
      console.log('稍后再看',item)
    },
  },
}
</script>
<style>
.el-popover.el-popper.el-popover-self-two {
  min-width: 80px !important;
  padding: 5px 0;
  width: 80px !important;
  background-color: #fff;
}
</style>
<style scoped>
.ul-dropdown-item {
  list-style: none;
}

.be-dropdown-item-delimiter {
  padding: 5px;
  text-align: center;
  font-size: 13px;
  color: #222;
  cursor: pointer;
}

.be-dropdown-item-delimiter:hover {
  color: #00a1d6;
  background-color: #e5e9ef;
}

.soon-dianzan-other:hover .drag-item-handlebar {
  transform: translateY(30px);
}

.drag-item-handlebar {
  position: absolute;
  top: -30px;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 30px;
  border: 1px solid #e7e7e7;
  box-sizing: border-box;
  background-color: #fff;
  cursor: move;
  transform: translateY(0);
  transition: transform .2s ease;
  text-align: center;
}


.num-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  padding: 0 5px;
  line-height: 20px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
}

.channel-add-video:hover {
  border-color: #00a1d6;
}

.channel-add-video:hover span {
  color: #00a1d6;
}

.channel-add-video {
  position: relative;
  width: 190px;
  height: 119px;
  margin-top: 10px;
  background: #fff;
  border: 2px dashed #b8c0cc;
  border-radius: 4px;
  transition: border .2s ease;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  margin-right: 10px;
  float: left;
}

.small-item-original {
  padding: 10px;
  width: 208px;
}

.small-item-six {
  padding: 10px 10px 10px 0;
  width: 198px;
}

.small-item-other {
  display: block;
  float: left;
  position: relative;
  margin: 0 0 3px;
}

.add-covers-meta {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

.create-covers-meta-span {
  display: block;
  color: #999999;
  font-size: 16px;
  text-align: center;
}

.meta {
  position: relative;
  font-size: 12px;
  color: #999999
}

.menu-delete-span {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #999;
  cursor: pointer;
  font-size: 14px;
}

.soon-dianzan-other {
  width: 188px;
  height: 119px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.soon-dianzan-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.length {
  font-size: 12px;
  z-index: 5;
  right: 4px;
  bottom: 6px;
  border-radius: 2px;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  line-height: 20px;
  padding: 0 6px;
  position: absolute;
}

.video-title {
  margin-top: 4px;
  height: 40px;
  font-size: 12px;
  line-height: 20px;
  overflow: hidden;
}

.two-text-overflow {
  max-height: 40px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-line-clamp: 2;
}

.common-cursor {
  cursor: pointer;
}

.common-hover:hover {
  color: #00a1d6;
}

.i-watchlater {
  position: absolute;
  right: 6px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  z-index: 5;
  border-radius: 4px;
  background: url(https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/static/jinkela/space/asserts/watchlater-1.svg) rgba(33, 33, 33, .8) 50%/contain no-repeat;
  cursor: pointer;
}
</style>
